//echartMap.ts
export default () => {
  const mapRender = (data: any = [], mapData: any = []) => {
    const mapLocal: any = [];
    mapData.forEach((value: any, index: number) => {
      mapLocal.push(value.properties.name);
    });

    // echarts 的数据配置选项 具体看官网
    const option = {
      //弹出框样式
      tooltip: {
        trigger: 'item',
        showDelay: 0,
        transitionDuration: 0.2,
        backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
        borderColor: '#333', // 提示框浮层的边框颜色。
        borderWidth: 0, // 提示框浮层的边框宽。
        padding: 5, // 提示框浮层内边距，
        textStyle: {
          // 提示框浮层的文本样式。
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
        },
        formatter: function (a, b) {
          if (a.data) {
            return `地区:${a['name']}</br>接口数量: ${a['data'].cata_sum}</br>文件夹数量: ${a['data'].file_folder_sum}</br>文件数量: ${a['data'].file_sum}</br>库表数量: ${a['data'].table_sum}</br>库表质量评分: ${a['data'].data_quality}`;
          } else {
            `地区:${a['name']}`;
          }
        },
      },
      backgroundColor: 'transparent',
      visualMap: {
        left: 'left',
        min: 0,
        max: 10,
        inRange: {
          //有数据的颜色
          symbol: 'rect',
          color: ['#ffffff', '#175EE9'],
        },
        text: ['高', '低'],
        calculable: true,
      },
      series: [
        {
          name: '地图',
          type: 'map',
          roam: false,
          zoom: 1.3,
          map: 'china',
          center: [110, 28.3],
          // 设置地图的文字
          label: {
            //地图上文字是否显示
            normal: {
              //鼠标不在地图上字体颜色
              show: true,
              fontSize: 20,
              borderColor: '#000', //边框颜色
              color: '#1951BE',
              textBorderColor:'#ffffff',
              textBorderWidth:1
            },
            // 点中后是否显示
            emphasis: {
              //鼠标在地图上字体颜色
              show: true,
              borderColor: '#000', //边框颜色
              textStyle: {
                color: '#1951BE',
              },
            },
          },
          itemStyle: {
            // 边框区域颜色
            normal: {
              //有数据填充区域
              color: '#1951BE', //文字颜色
              areaColor: '#FFFFFF', //区域颜色
              borderColor: '#175EE9', //边框颜色
              shadowColor: '#FFFFFF', //阴影颜色
              shadowBlur: 20, //阴影
            },
          },
        },
      ],
    };
    return option;
  };
  return mapRender;
};
